<template>
  <div class="rich_card">
    <!-- 比赛简介 -->
    <div class="section intro">
      <h3>{{ t('club_page_bisaijianjie') }}</h3>
      <div v-html="props.introduction.introduction"></div>
    </div>

    <!-- 比赛详情 -->
    <div class="section details">
      <h3>{{ t('club_page_bisaixiangqing')}}</h3>
      <ul>
        <!-- <li v-for="(detail, index) in detailContent" :key="index">{{ detail }}</li> -->
        <li>{{ props.introduction.detail }}</li>
      </ul>
    </div>

    <!-- 比赛规则 -->
    <div class="section rules">
      <h3>{{ t('club_page_bisaiguize')}}</h3>
      <ul>
        <!-- <li v-for="(rule, index) in ruleContent" :key="index">{{ rule }}</li> -->
        <li>{{ props.introduction.rule }}</li>
      </ul>
    </div>

    <!-- 比赛奖励 -->
    <div class="section rewards">
      <h3>{{ t('club_page_bisaijiangli') }}</h3>
      <ul>
        <!-- <li v-for="(reward, index) in rewardContent" :key="index">
          <span :class="reward.colorClass">{{ reward.icon }} {{ reward.text }}</span>
        </li> -->
        <li>
          <span>{{ props.introduction.bonus_detail }}</span>
        </li>
      </ul>
    </div>

    <!-- 报名方式 -->
    <div class="section note">
      <h3>{{ t('club_page_baoming') }}</h3>
      <!-- <div v-html="noteContent"></div> -->
      <div>{{ props.introduction.applyway }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { ref } from 'vue';
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const props = defineProps({
  introduction: { // 房间ID
    type: Object,
    default: {}
  },
})

// 比赛简介富文本内容
// const introContent = ref(`
//   <p>
//     欢迎参加<b>本年度最激动人心</b>的德州扑克锦标赛！
//     无论您是经验丰富的扑克高手，还是刚刚入门的新手，
//     这场比赛将为您提供一个展示技巧和赢得荣誉的平台。
//   </p>
// `);

// 比赛详情内容
// const detailContent = ref([
//   '日期：2024年7月20日',
//   '时间：下午2:00开始',
//   '比赛人数：9-2000人',
// ]);

// 比赛规则内容
// const ruleContent = ref([
//   '起始筹码：$5,000',
//   '比赛采用增盲无重返规则。',
//   '每位参赛者将获得相同的起始筹码。',
//   '冠军将获得一个经过定制奖杯。',
// ]);

// 比赛奖励内容
// const rewardContent = ref([
//   { icon: '🥇', text: '一等奖第一名奖金: $2,888,888', colorClass: 'gold' },
//   { icon: '🥈', text: '二等奖第二名奖金: $1,888,888', colorClass: 'silver' },
//   { icon: '🥉', text: '三等奖第三名奖金: $888,888', colorClass: 'bronze' },
//   { icon: '', text: '四等奖奖金: $58,888', colorClass: '' },
//   { icon: '', text: '参赛奖：奖金千元代币1000', colorClass: '' },
// ]);

// 比赛奖励说明富文本内容
// const noteContent = ref(`
//   <p>报名方式：</p>
//   <p>
//     请通过我们的网站或线下俱乐部前台报名。<br />
//     名额有限，<b>先到先得</b>！准备好展示你的技能，赢取属于你的奖金吧！
//   </p>
// `);
</script>

<style scoped lang="scss">
.rich_card {
  width: 347px;
  margin: 0 auto;
  color: #fff;
  font-family: 'Arial', sans-serif;
  padding: 20px 0 120px;

  .section {
    margin-bottom: 12px;
  }

  // 通用标题样式
  h3 {
    margin-bottom: 10px;
    color: #fff;
    text-align: left;
    font-family: "PingFang SC";
    font-size: 14px;
    font-weight: 600;
  }

  // 富文本内容样式
  .intro,
  .note {
    p {
      font-size: 14px;
      line-height: 1.5;
      color: #FFF;
    }
  }

  // 列表样式
  .details,
  .rules,
  .rewards {
    ul {
      list-style: none;
      padding: 0;
      margin: 0;

      li {
        font-size: 14px;
        line-height: 1.8;
        color: #FFF;

        // 动态颜色样式
        &.gold {
          color: #FFB700;
          font-weight: bold;
        }

        &.silver {
          color: #C4C4C4;
          font-weight: bold;
        }

        &.bronze {
          color: #E89160;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
